<app-system-log-detail></app-system-log-detail>
<clr-datagrid [clrDgLoading]="loading">
  <clr-dg-action-bar>
    <div style="float: right;margin-top: -2%">
      <div class="clr-input-wrapper">
        <input clrInput placeholder="关键字" name="name" [(ngModel)]="keywords"/>
      </div>
      <div class="clr-select-wrapper">
        <select class="clr-select" [(ngModel)]="limit">
          <option value=1>过去一天</option>
          <option value=7>过去一周</option>
          <option value=30>过去一月</option>
        </select>
      </div>
      &nbsp;
      <div class="clr-select-wrapper">
        <select class="clr-select" [(ngModel)]="level">
          <option value="DEBUG">DEBUG</option>
          <option value="INFO">INFO</option>
          <option value="WARNING">WARNING</option>
          <option value="ERROR">ERROR</option>
        </select>
      </div>
      <button class="btn btn-link" (click)="refresh(true)">
        <clr-icon shape="refresh"></clr-icon>
      </button>
    </div>
  </clr-dg-action-bar>
  <clr-dg-column>名称</clr-dg-column>
  <clr-dg-column>等级</clr-dg-column>
  <clr-dg-column>时间</clr-dg-column>

  <clr-dg-row *ngFor="let log of logs" [clrDgItem]="log">
    <clr-dg-cell style="cursor: pointer;color: #0079b8;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"><a
      (click)="showDetail(log)">{{log.message}}</a></clr-dg-cell>
    <clr-dg-cell>{{log.level}}</clr-dg-cell>
    <clr-dg-cell>{{log.timestamp}}</clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgTotalItems]="totalItems" [(clrDgPage)]="currentPage"
                       (clrDgPageChange)="onPageChange()"
                       [clrDgPageSize]="size">
      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">每页</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{pagination.totalItems}} items
    </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>
